<template>
  <el-dialog
    v-model="PersonageInfoDialogData.isVisible"
    :close-on-click-modal="false"
    width="300"
    class="flex-tblr-center"
  >
    <div class="fill flex-tblr-col-justify">
      <div class="avatar">
        <el-image
          class="wh-100-percent"
          src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
          fit="fill"
        ></el-image>
        <div class="wh-100-percent flex-tblr-center avatar-mask finger">
          <el-icon :size="30"><CameraFilled /></el-icon>
        </div>
      </div>
      <h3
        :contenteditable="contenteditable"
        @dblclick="contenteditable=true"
        @blur="contenteditable=false"
        @keydown.enter="ChangeNickName"
        class="finger"
        style="outline: none"
      >
        {{nickName}}
      </h3>
      <span class="font-size-12">(双击修改)</span>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="PersonageInfoDialog">
import { defineProps, ref } from "vue";
import { CameraFilled } from "@element-plus/icons-vue";
defineProps(["PersonageInfoDialogData"]);
let contenteditable = ref(false);
let nickName = ref("昵称");
function ChangeNickName(){
  contenteditable.value = false;
}
</script>

<style scoped>
.avatar:hover > div {
  opacity: 1;
}
.avatar {
  width: 80px;
  height: 80px;
  position: relative;
}

.avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}
</style>